<div id="sql-tool" class="tool-content active">
    <div class="tool-header">
        <h2>SQL IN条件转换工具</h2>
        <p class="tool-description">将多行文本转换为SQL IN条件，支持数字、单引号和双引号格式</p>
    </div>
    
    <!-- 转换方式切换标签 -->
    <div class="input-tabs">
        <button class="input-tab active" data-tab="to-sql">转为SQL</button>
        <button class="input-tab" data-tab="from-sql">从SQL还原</button>
    </div>

    <!-- 转为SQL区域 -->
    <div id="to-sql-input" class="input-content active">
        <div class="input-section">
            <div class="input-group">
                <label>输入数据（一行一个）：</label>
                <textarea id="sql-input-data" rows="6" placeholder="请输入数据，每行一个..."></textarea>
            </div>
            
            <div class="settings-section">
                <h3>转换设置</h3>
                <div class="form-row">
                    <div class="form-group">
                        <label>数据类型：</label>
                        <select id="sql-data-type">
                            <option value="number">数字</option>
                            <option value="string" selected>字符串（单引号）</option>
                            <option value="json">字符串（双引号）</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>字段名：</label>
                        <input type="text" id="sql-field-name" placeholder="例如：id" value="">
                    </div>
                </div>
            </div>
            
            <div class="actions">
                <button onclick="convertToSql()" class="primary-btn">转换为SQL</button>
                <button onclick="clearInputs()" class="secondary-btn">清空</button>
            </div>
            
            <div class="input-group">
                <label>转换结果：</label>
                <textarea id="sql-output-result" rows="3" readonly placeholder="转换后的SQL IN条件将显示在这里..."></textarea>
                <button onclick="copyToClipboard('sql-output-result')" class="secondary-btn">复制结果</button>
            </div>
        </div>
    </div>

    <!-- 从SQL还原区域 -->
    <div id="from-sql-input" class="input-content">
        <div class="input-section">
            <div class="input-group">
                <label>输入SQL IN条件：</label>
                <textarea id="sql-reverse-input" rows="3" placeholder="例如：('value1', 'value2', 'value3') 或 (1, 2, 3)"></textarea>
            </div>
            
            <div class="actions">
                <button onclick="convertFromSql()" class="primary-btn">还原为多行</button>
                <button onclick="clearReverseInputs()" class="secondary-btn">清空</button>
            </div>
            
            <div class="input-group">
                <label>还原结果：</label>
                <textarea id="sql-reverse-output" rows="6" readonly placeholder="还原后的多行数据将显示在这里..."></textarea>
                <button onclick="copyToClipboard('sql-reverse-output')" class="secondary-btn">复制结果</button>
            </div>
        </div>
    </div>
</div>